<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
  <head>
      <meta charset="UTF-8">
      <title>双向数据渲染</title>
  </head>
  <body>
<!--需求：在hobby1输入框中输入数据，会更新到hobby2和h1-->
  <div id="app">
    <h1>{{message}}</h1>
<!--
1.v-bind是数据单向渲染 即data数据池绑定的数据变化会影响到view
2.v-model是数据双向渲染 即data数据池绑定的数据变化会影响到view【底层机制是Data Bindings】，
  view关联的元素值变化了，会影响到data数据池的数据【底层机制是Dom Listener】-->
    <input type="text" name="hobby1" v-model:value="hobby.val"><br/>
    <input type="text" name="hobby2" v-bind:value="hobby.val">
    <p>您输入的爱好是:{{hobby.val}}</p>
  </div>

  <script src="vue.js"></script>
  <script type="text/javascript">
    let vm = new Vue({
      el:"#app",
      data:{
        message:"输入你的爱好",
        hobby:{
          val:"购物"
        }
      }
    })
  </script>
  </body>
</html>